<template>
  <view v-if="goodinfo.pics">
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="(item,i) in goodinfo.pics.length==0?imgdefault:goodinfo.pics" :key="i">
        <image :src="item.pics_big||item" @click="fadatup(i)"></image>
      </swiper-item>
    </swiper>
    <!-- 商品介绍 -->
    <view class="goodjieshao" v-if="goodinfo.goods_price">
      <view class="jiage">￥{{goodinfo.goods_price}}</view>
      <view class="jieshao">
        <view class="left">{{goodinfo.goods_name}}</view>
        <view class="right">
          <uni-icons type="star" size="16"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <view class="yf">
        <text>快递：免运费</text>
      </view>
    </view>
    <!-- 商品详细介绍 -->
    <rich-text :nodes="goodinfo.goods_introduce"></rich-text>
    <!-- 商品导航 -->
    <view class="goodnav">
      <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations,mapGetters} from 'vuex'
  export default {
    computed:{
      ...mapState('m_cat',['cart']),
      ...mapGetters('m_cat',['totail'])
    },
    watch:{
      totail:{
        handler(newval){
          
          this.options[1].info=newval
        },
        immediate:true ,//深度监听页面加载完后立即调用
                        //不是深度监听页面首次加载不调用
      }
    },
    data() {
      return {
        goodinfo:{},
        url2:'E:/xiaochengxu/shop/uni-shop2',
        imgdefault:['https://ts1.cn.mm.bing.net/th/id/R-C.88eb2824044ee84744e0a982a7dbd7ac?rik=qE71fJlnmCXsQg&riu=http%3a%2f%2fy2.ifengimg.com%2fhaina%2f2015_24%2fdf363d646e1a6c9.70337124_1000&ehk=EFVMz1N%2byXPpNOshxp3p%2bW5eqAEp3I1jABkvtNPTzfg%3d&risl=&pid=ImgRaw&r=0','https://img.zcool.cn/community/01b37d5808a84fa84a0e282b82f6ed.png@1280w_1l_2o_100sh.png'],
        options: [ {
        			icon: 'shop',
        			text: '店铺',
        			infoBackgroundColor:'#007aff',
        			infoColor:"red"
        		}, {
        			icon: 'cart',
        			text: '购物车',
        			info: ''
        		}],
        	    buttonGroup: [{
        	      text: '加入购物车',
        	      backgroundColor: '#ff0000',
        	      color: '#fff'
        	    },
        	    {
        	      text: '立即购买',
        	      backgroundColor: '#ffa200',
        	      color: '#fff'
        	    }
        	    ]
        
      };
    },
    onLoad(options){
      uni.$getlistdata([uni.url_t.goodsdetail,options],'goodinfo',this).then(res=>{
        this.goodinfo.goods_introduce=this.goodinfo.goods_introduce.replace(/<img/,'<img style="display=block" ')
      })
      
    },
    methods:{
      geturl(a){
        return a.pics.length==0?this.imgdefault:a.pics.map(res=>res.pics_big)
      },
      fadatup(i){
        const urls1= this.geturl(this.goodinfo)
        console.log(i)
        uni.previewImage({
          current:i,
          urls:urls1,
          success: (res) => {
         
          }
         
      })
    },
    onClick (e) {
    	    if(e.index==1){
            uni.switchTab({
              url:'/pages/car/car'
            })
          }
    	  },
    	  buttonClick (e) {
    	   
          if(e.index==0){
            const a={
              goods_id:this.goodinfo.goods_id,
              goods_name:this.goodinfo.goods_name,
              goods_price:this.goodinfo.goods_price,
              goods_count:1,
              goods_small_logo:this.goodinfo.goods_small_logo,
              goods_state:true,
            }
            this.addgood(a)
            
          }
    	   
    	  },
        ...mapMutations('m_cat',['addgood'])
    	}
  
  }
</script>

<style lang="scss">
  swiper{
    height: 750rpx;
    image{
      height: 100%;
      width:100%;
    }
  }
  .goodjieshao{
    padding:5px;
    padding-right: 0;
    .jiage{
      color: red;
      font-size: 15px;
      margin: 5px 0;
    }
    .jieshao{
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      .left{
        font-size: 15px;
        border-right: 1px solid grey;
       
      }
      .right{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width:100px;
        font-size: 12px;
      }
    }
    .yf{
      font-size: 12px;
      color: grey;
    }
  }
  .goodnav{
    position: sticky;
    bottom: 0;
  }

</style>
